﻿<div stop-input-propagation class="bg_console clearfix" ng-init="activeTab = 'lib'">
    <div>
        <ul class="nav nav-tabs nav-justified" style="padding-top:0px;">
            <li class="active">
                <a href="" ng-show="fileType == '0'" ng-click="activeTab = 'lib'; toggleUpload(false); changeCategory('all'); newuserpost();"
                   data-toggle="tab">
                    背景库
                </a>
                <a href="" ng-show="fileType == '1'" ng-click="activeTab = 'lib'; toggleUpload(false); changeCategory('all')"
                   data-toggle="tab">
                    图片库
                </a>
            </li>
            <li ng-click="changeCategory('0')">
                <a href="" ng-show="fileType == '0'" ng-click="activeTab = 'mine'; toggleUpload(true);"
                   data-toggle="tab">
                    我的背景
                </a>
                <a href="" ng-show="fileType == '1'" ng-click="activeTab = 'mine'; toggleUpload(true)"
                   data-toggle="tab">
                    我的图片
                </a>
            </li>
            <li ng-show="fileType == '1' && selectedImg">
                <a ng-click="activeTab = 'style';" data-toggle="tab">
                    样式
                </a>
            </li>
            <li ng-show="fileType == '1' && selectedImg">
                <a ng-click="activeTab = 'anim';" data-toggle="tab">
                    动画
                </a>
            </li>
        </ul>
    </div>
    <div>
        <div class="tab-content" id="bg_contain">
            <div class="tab-pane" ng-class="{active: activeTab == 'lib'}" ng-show="activeTab == 'lib'">
                <div class="img_list">
                    <div class="nav2">
                        <ul class="nav2_list clearfix">
                            <li class="category_item" ng-click="changeCategory('all')" ng-class="{active: 'all' == categoryId}">
                                最新
                            </li>
                            <li ng-class="{active: category.value == categoryId}" class="category_item"
                                ng-repeat="category in categoryList" ng-click="changeCategory(category.value); getChildCategory(category.value);sysTagIndex = -1;">
                                {{category.name}}
                            </li>
                            <li ng-show="fileType == '0'" class="category_item" ng-click="changeCategory('c');numPages=2;"
                                ng-class="{active: 'c' == categoryId}">
                                纯色
                            </li>
                        </ul>
                    </div>
                    <div class="cat_two_list clearfix" ng-if="'c' != categoryId && 'all' != categoryId">
                        <ul>
                            <li ng-class="{active: sysTagIndex == $index}" ng-repeat="childCatrgory in childCatrgoryList"
                                ng-click="getImagesBySysTag(childCatrgory.id, $index, 1, categoryId)" style="cursor:pointer;">
                                {{childCatrgory.name}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="tab-pane active" ng-show="activeTab == 'mine'">
                <div class="img_list" style="padding-bottom: 0px;">
                    <div class="edit">
                        <div class="btn-group">
                            <div class="category_item active" ng-click="createCategory();">
                                创建分类
                            </div>
                            <div class="dropdown-toggle" data-toggle="dropdown" ng-click="setIndex($event);">
                                分类到
                            </div>
                            <div class="dropdown-menu" role="menu">
                                <ul forbidden-close>
                                    <li ng-class="{selecttag: dropTagIndex == $index}" ng-repeat="myTag in myTags"
                                        ng-click="selectTag(myTag, $index)">
                                        <span>
                                            {{myTag.name}}
                                        </span>
                                    </li>
                                    <li ng-click="createCategory();" class="add_cate clearfix">
                                        <em>
                                            +
                                        </em>
                                        <span>
                                            添加分类
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div ng-if="tagIndex > -1" class="hidden">
                            <a href="" ng-click="unsetTag()">
                                取消分类
                            </a>
                        </div>
                        <div class="category_del">
                            <input type="checkbox" ng-model="allImages.checked" ng-change="selectAll()" />
                            &nbsp;&nbsp;
                            <span ng-click="deleteImage()">
                                <a href="">
                                    删除
                                </a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="nav2 clearfix">
                    <ul class="nav2_list clearfix">
                        <li ng-class="{active: tagIndex == -1}" class="category_item" ng-click="changeCategory('0');">
                            全部
                        </li>
                        <li ng-class="{active: tagIndex == $index}" class="category_item" ng-repeat="myTag in myTags"
                            ng-mouseenter="hoverTag(myTag)" ng-mouseleave="hoverTag(myTag)" ng-click="getImagesByTag(myTag.id, $index)">
                            {{myTag.name}}
                            <span class="delete-tag" ng-if="myTag.hovered" ng-click="deleteTag(myTag.id, $index, $event)">
                                x
                            </span>
                        </li>
                    </ul>
                </div>
                <p class="bgsize-tip">
                    图片过大会导致浏览变慢,
                    <a class="btn-link" href="http://www.secaibi.com/tools/" target="_blank">
                        我要压缩
                    </a>
                </p>
            </div>
            <div id="comp_setting" class="tab-pane" ng-class="{active: activeTab == 'style'}"
                 ng-show="activeTab == 'style'">
                <div class="style_content" ng-include="'scene/console/style.tpl.html'">
                </div>
            </div>
            <div id="comp_setting" class="tab-pane" ng-class="{active: activeTab == 'anim'}"
                 ng-show="activeTab == 'anim'">
                <div class="style_content" ng-include="'scene/console/anim.tpl.html'">
                </div>
            </div>
        </div>
        <div class="img_list img_list_container_wrapper" style="padding-top:0px;"
             ng-show="activeTab == 'mine' || activeTab == 'lib'">
            <div class="img_list_container" id="imgListContainer" ng-class="{photo_list: fileType == '1', bg_list: fileType == '0'}">
                <ul class="img_box clearfix" masonry preserve-order load-images="true"
                    column-width="1">
                    <li ng-show="categoryId == '0'" ng-repeat="dummy in uploadDummy" class="upload masonry-brick"
                        title="上传图片" id="uploadButton">
                        <span class="upload_info" ng-show="fileType == '0'">
                            <span class="upload_add">
                                +
                            </span>
                            <span class="upload_txt" title="上传背景">
                                上传背景
                            </span>
                            <span class="upload_wh">
                                640*972
                            </span>
                            <span class="upload_ex">
                                jpg.png.gif
                            </span>
                            <span class="upload_kb">
                                小于{{maxFileSize | uppercase}}
                            </span>
                        </span>
                        <span class="upload_info" ng-show="fileType == '1'">
                            <span class="upload_add">
                                +
                            </span>
                            <span class="upload_txt" title="上传素材">
                                上传素材
                            </span>
                            <span class="upload_ex">
                                jpg.png.gif
                            </span>
                            <span class="upload_kb">
                                小于{{maxFileSize | uppercase}}
                            </span>
                        </span>
                    </li>
                    <li class="imageList masonry-brick" ng-if="fileType == '0' && 'c' != categoryId"
                        ng-repeat="img in imgList track by $index" title="点击即可选择" ng-click="selectImg(img, $event)"
                        ng-mouseenter="hoverIn(img)" ng-mouseleave="hoverOut(img)" ng-class="{hovercolor: img.showOp || img.selected}">
                        <img ng-src="{{img.tmbPath.length<100?PREFIX_FILE_HOST +img.tmbPath:img.tmbPath}}"
                             alt="点击即可选择" />
                        <span ng-show="img.tmbPath.length>100" class="img-loading">
                            <img ng-src="{{CLIENT_CDN}}assets/images/loading.gif" />
                        </span>
                        <div class="edit_content" ng-if="(img.showOp || img.selected) && categoryId == '0'">
                            <div class="select" ng-click="switchSelect(img, $event)" ng-if="!img.selected && categoryId == '0'">
                                <img ng-src="{{CLIENT_CDN}}assets/images/nocheck.jpg" />
                            </div>
                            <div class="select" ng-click="switchSelect(img, $event)" ng-if="img.selected && categoryId == '0'">
                                <img ng-src="{{CLIENT_CDN}}assets/images/checked.png" />
                            </div>
                            <div class="del" ng-click="deleteImage(img.id, $event)">
                                <img ng-src="{{CLIENT_CDN}}assets/images/bg_07.png" />
                            </div>
                        </div>
                    </li>
                    <li class="imageList masonry-brick" ng-if="fileType == '1'" ng-repeat="img in imgList track by $index"
                        ng-click="selectImg(img, $event)" ng-mouseenter="hoverIn(img)" ng-mouseleave="hoverOut(img)"
                        ng-class="{hovercolor: img.showOp || img.selected}">
                        <img ng-src="{{img.tmbPath.length<100?PREFIX_FILE_HOST +img.tmbPath:img.tmbPath}}" />
                        <span ng-show="img.tmbPath.length>100" class="img-loading">
                            <img ng-src="{{CLIENT_CDN}}assets/images/loading.gif" />
                        </span>
                        <div class="edit_content" ng-show="(img.showOp || img.selected) && categoryId == '0'">
                            <div class="select" ng-click="switchSelect(img, $event)" ng-if="!img.selected && categoryId == '0'">
                                <img ng-src="{{CLIENT_CDN}}assets/images/nocheck.jpg" />
                            </div>
                            <div class="select" ng-click="switchSelect(img, $event)" ng-if="img.selected && categoryId == '0'">
                                <img ng-src="{{CLIENT_CDN}}assets/images/checked.png" />
                            </div>
                            <div class="del" ng-click="deleteImage(img.id, $event)" ng-click="deleteImg()">
                                <img ng-src="{{CLIENT_CDN}}assets/images/bg_07.png" />
                            </div>
                        </div>
                    </li>
                    <li class="photo_item" style="background-color: {{img.color}}" ng-show="fileType == '0' && 'c' == categoryId"
                        ng-mouseenter="hoverIn(img)" ng-mouseleave="hoverOut(img)" ng-class="{hovercolor: img.showOp || img.selected, mr0: $index%9 == 8}"
                        ng-click="selectImg(img, $event)" ng-repeat="img in imgList track by $index">
                    </li>
                </ul>
            </div>
            <div class="fanye_foot clearfix" style="margin-top: 20px;display:none;">
                <div class="pagination_container">
                    <pagination class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;"
                                first-text="&laquo;" last-text="&raquo;" max-size="5" items-per-page="pageSize"
                                total-items="totalItems" ng-model="currentPage" ng-change="getImagesByPage(categoryId, currentPage)"
                                boundary-links="true" rotate="true" num-pages="numPages">
                    </pagination>
                    <div class="current_page">
                        <input type="text" ng-model="toPage" ng-keyup="$event.keyCode == 13 ? getImagesByPage(categoryId, toPage) : null">
                        <a ng-click="getImagesByPage(categoryId,toPage)" class="go">
                            GO
                        </a>
                        <span>
                            当前: {{currentPage}} / {{numPages}} 页
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>